<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>银行卡管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <style>
        .table > tbody > tr > td {
            height: 30px;
            max-height: 44px;
            overflow: hidden;
            padding: 0 2px;
        }

        .saveModle {
            width: 500px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }

        .webuploader-pick {
            padding: 3px 0;
            background: none;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        p {
            display: inline-block;
            float: left;
            margin-bottom: 0px;
            line-height: 25px;
            padding-right: 15px;
            color: #228bee;
            font-size: 14px;
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: black !important;
            /*display: -webkit-box;*/
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 34px;
        }

        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: black !important;
        }

        td {
            height: 47.78px;
        }

        .td-value span {
            display: inline-block;
            overflow: hidden;
            padding-left: 0.06rem;
            word-wrap: break-word;
            color: black !important;
        }

        /*span.lineOne {*/
        /*line-height: 30px;*/
        /*height: 30px;*/
        /*overflow: hidden;*/
        /*text-overflow: ellipsis;*/
        /*display: -webkit-box;*/
        /*-webkit-box-orient: vertical;*/
        /*-webkit-line-clamp: 1;*/
        /*}*/
        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }

        .nav > li > a {
            padding: 10px 10px;
        }

        .content {
            padding: 0;
        }

        .nav-tabs-custom > .nav-tabs > li.active {
            color: #2a8cec;
        }

        .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
            background: #fff;
            color: #2a8cec;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }

        .nav-tabs {
            border-bottom: 0px solid #ddd;
        }

        .nav-tabs-custom > .nav-tabs {
            /*border-bottom-color: #fff;*/
        }

        .nav-tabs-custom {
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
        }
        .content {
            padding: 8px 8px 0 8px;
        }
        body{
            overflow-y: hidden;
        }
    </style>
</head>
<body>
<iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
<section class="content" id="app" v-cloak>
    <div class="nav-tabs-custom oaReportNav" style="margin-top: 10px;margin-bottom: 0px;">
        <select id="testCom" style="width:100px;margin-left:7px; height: 25px" class="pull-left"
                v-model="searchParams.selectCom">
            <option value="请选择公司">请选择公司</option>
            <option v-for="itemC in itemsCom" v-bind:value="itemC.id">{{itemC.name}}</option>
        </select>
        <div class="has-feedback" style="margin-left: 7px;">
            <input type="text" id="likeSelect" class="form-controll pull-left input-sm"
                   v-model="searchParams.key" style="margin-left:7px; border-radius: 0px;" placeholder="请输入关键字"
                   size="12">
            <span id="btnQuery" class="glyphicon glyphicon-search form-control-feedback"
                  style="display:none "></span>
            <input type="button" class="btn oaBtn pull-left btn-sm" style="margin-left: 10px;min-width: 45px;"
                   value="查询"
                   class="oaBtn" @click="getList()">
        </div>
        <div id="progress" class="wyui-progress" style="padding-left: 0px;"></div>
        <div style="float: right;margin-right: 7px;padding-left: 0px;">
            <input type="button" class="btn oaBtn btn-sm pull-right" style="height: 25px"
                   @click="download()"
                   value="下载execl模板"/>
        </div>
        <div id="divUpload4" class="fj" style="float: right;margin-top: -3px;margin-right: 7px;padding-left: 0px;">
            <input type="button" class="btn oaBtn btn-sm pull-right" style="height: 25px;min-width: 45px;"
                   value="导入"/>
        </div>
        <div class="has-feedback" style="float:right; height: 25px;margin-right: 10px;">
            <input type="button" class="btn oaBtn pull-left btn-sm"
                   style="height: 25px; margin-right: 0px;min-width: 45px;" value="新增"
                   class="oaBtn" @click="gotoDetail(0,'edit',1)">
        </div>

        <div style="clear: both"></div>
    </div>
    <div class="box-body no-padding iframeHBandList" style="overflow: auto;">
        <div class="fixed-table-box head-fixed ">
            <div class="fixed-table_header-wraper">
                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                    <tr>
                        <th class="tableTitle" style="width: 80px;text-align: center;">序号</th>
                        <th class="tableTitle" style="text-align:left;">开户人</th>
                        <th class="tableTitle" style="text-align:left;">开户行名称</th>
                        <th class="tableTitle" style="text-align:left;">银行卡号</th>
                        <th class="tableTitle" style="width: 80px;text-align: center;">操作</th>
                        <th style="width: 17px;"></th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="fixed-table_body-wraper iframeBandkListFixed"  id="scrollDiv">
                <table class="fixed-table_body table-hover" cellspacing="0" cellpadding="0" border="0"
                       style="width: 100%;">
                    <tbody>
                    <tr v-for="(item,i) in list">
                        <td style="width: 80px;">
                            {{i+1}}
                        </td>
                        <td style="text-align: left;"><a href="javascript:void(0);" v-if="item.userId"
                                                         @click="gotoDetail(item.userId,'look',item.name)">{{item.name}}</a><span
                                href="javascript:void(0)" v-else="item.userId">{{item.name}}</span>
                        </td>
                        <td style="text-align: left;">{{item.bankName}}</td>
                        <td style="text-align: left;">{{item.bankCard}}</td>
                        <td style="width: 80px;">
                            <a href="javascript:void(0);" @click="gotoDetail(item.id,'edit',0)">&nbsp;编辑&nbsp;</a>
                            <a href="javascript:void(0);" @click="deleById(item.id)">&nbsp;删除&nbsp;</a>
                        </td>
                        <template v-if="list.length>=18">
                            <td style="width: 0px"></td>
                        </template>
                        <template v-else>
                            <td style="width: 17px;"></td>
                        </template>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="oa-pager text-center">
        共
        <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
        <span class="oa-pager-button" id="first">首页</span>
        <span class="oa-pager-button" id="prev">上一页</span>
        <span class="oa-pager-button" id="next">下一页</span>
        <span class="oa-pager-button" id="last">尾页</span>
    </div>
    <!--<div class="box-body no-padding iframeH5" style="overflow: auto;margin-top:10px;display: inline-block; " id="scrollDiv">-->
    <!--<table class="table table-hover text-center" style="margin: auto;width: 99%;">-->
    <!--<thead>-->
    <!--<tr>-->
    <!--<th class="tableTitle" style="width: 80px;">序号</th>-->
    <!--<th class="tableTitle" style="text-align:left;">开户人</th>-->
    <!--<th class="tableTitle" style="text-align:left;">开户行名称</th>-->
    <!--<th class="tableTitle" style="text-align:left;">银行卡号</th>-->
    <!--<th class="tableTitle" style="width: 80px;">操作</th>-->
    <!--</tr>-->
    <!--</thead>-->
    <!--<tbody>-->
    <!--<tr v-for="(item,i) in list">-->
    <!--<td style="cursor: pointer;">-->
    <!--{{i+1}}-->
    <!--</td>-->
    <!--<td style="text-align: left;"><a href="javascript:void(0);" v-if="item.userId" @click="gotoDetail(item.userId,'look',item.name)">{{item.name}}</a><span href="javascript:void(0)" v-else="item.userId">{{item.name}}</span>-->
    <!--</td>-->
    <!--<td style="text-align: left;">{{item.bankName}}</td>-->
    <!--<td style="text-align: left;">{{item.bankCard}}</td>-->
    <!--<td><a href="javascript:void(0);" @click="gotoDetail(item.id,'edit',0)">&nbsp;编辑&nbsp;</a>-->
    <!--<a href="javascript:void(0);" @click="deleById(item.id)">&nbsp;删除&nbsp;</a>-->
    <!--</td>-->
    <!--</tr>-->
    <!--</table>-->
    <!---->
    <!--</div>-->
    <!-- /.box-body -->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>

<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                var width = $(this).outerWidth();
                if (width < 180) {
                    width = 180;
                }
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": width + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    $.wyui.page.dataUrl = server.ip + urlConfig.bank.getBankByPage;
    $.wyui.page.queryParams.userId = getCurrentUser().id;
    $.wyui.page.queryParams.key = '';
    $.wyui.page.getByPage_callback = function () {
    };
    $.wyui.page.getByPage_callback_new = function (r) {
        app.list = r.records;
        console.log(app.list);
    };

    function refresh() {
        $.wyui.page.getByPage();
    }

    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            itemsCom: [],
            searchParams: {
                key: '',
                selectCom: "请选择公司"
            },

        },
        methods: {
            gotoDetail: function (id, pageType, isAdd) {
                if (pageType == 'edit' && isAdd == 1) {
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].checked && this.list[i].createUserId == getCurrentUser().id) {
                            id = this.list[i].id;
                            break;
                        }
                    }
                }
                if (pageType == "look") {
                    debugger;
                    top.$.dialog({
                        content: 'url:/page/personnel/entry.html?id=' + id + '&pageType=' + pageType,

                        title: isAdd + "详情",
                        width: 904,
                        height: 613,
                        max: true,
                        min: true,
                        lock: true
                    }).max();
                } else {
                    top.$.dialog({
                        content: 'url:apply/money/bankDetail.html?id=' + id + '&pageType=' + pageType + "&isAdd=" + isAdd + "&t=" + new Date(),
                        title: isAdd == "1" ? '新增银行卡信息' : "编辑银行卡信息",
                        width: 400,
                        height: 400,
                        max: true,
                        min: true,
                        lock: true
                    });
                }
            },
            getList: function () {
                this.selectId = '';
                $.wyui.page.queryParams.key = $.trim(this.searchParams.key);
                $.wyui.page.queryParams.companyId = this.searchParams.selectCom;
                $.wyui.page.queryParams.requestPage = 1;
                $.wyui.page.queryParams.pageSize = 20;
                $.wyui.page.getByPage();
            },
            importExcel: function () {
                var that = this;
                setTimeout(function () {
                    $(".fj").each(function () {
                        var demo = $(this);

                        var uploader = WebUploader.create({
                            // 选完文件后，是否自动上传。
                            auto: true,
                            // swf文件路径
                            swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                            // 文件接收服务端。
                            server: server.ip + "/importExcel/bankFile.json",
                            // 选择文件的按钮。可选。
                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                            pick: '#' + demo.attr("id"),
                            duplicate: true,
                            formData: {createUserId: getCurrentUser().id}
                        });
                        // 文件上传过程中创建进度条实时显示。
                        uploader.on('uploadProgress', function (file, percentage) {
                            var $li = $('#' + file.id),
                                $percent = $li.find('.progress span');
                            // 避免重复创建
                            if (!$percent.length) {
                                $percent = $('<p class="progress"><span></span></p>')
                                    .appendTo($li)
                                    .find('span');
                            }
                            $percent.css('width', percentage * 100 + '%');
                        });
                        uploader.on("uploadStart", function () {
                            $("#progress").show();
                        });
                        uploader.on("uploadComplete", function () {
                            $("#progress").hide();
                        });
                        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                        uploader.on('uploadSuccess', function (file, response) {
                            console.log(file)
                            console.log(JSON.parse(response._raw).e.desc)
                            $.wyui.page.getByPage();
                            alert("上传成功！");


                        });

                        // 文件上传失败，显示上传出错。
                        uploader.on('uploadError', function (file) {
                            alert("上传失败！");
                        });
                    });
                }, 10);
            },
            deleById: function (id) {

                if (confirm("确定要删除吗？")) {
                    $.wyui.postMethod(urlConfig.bank.removeById, {id: id}, function (data) {
                        alert("删除成功");
                        refresh();
                    });

                } else {

                }
            },
            download: function () {
                 var attachId = 'https://file.ggxqce.com/images/201904/11/000502647dc34fc6bc4c877eda683c39/%E9%93%B6%E8%A1%8C%E5%8D%A1%E5%AF%BC%E5%85%A5.xlsx';
                 var  fileName = '银行卡信息模板.xlsx';
                downloadFile(attachId, fileName)
                return false;
            }
        },
        mounted: function () {
            var that = this;
            var H = $(window).height();
            $(".iframeHBandList").height(H - 79);
            $(".iframeBandkListFixed").height(H - 105);
            that.importExcel();
            /*首先显示公司下拉表*/
            $.wyui.postMethod('/company/getCompanyByUserId.json', {userId: getCurrentUser().id}, function (r) {
                that.itemsCom = r;
            });

        }
    });
    $(window).resize(function () {
        var H = $(window).height();
        $(".iframeHBandList").height(H - 79);
        $(".iframeBandkListFixed").height(H - 105);
    })
</script>
<script>
    /************************滚动加载******************************/
    var divscroll = document.getElementById('scrollDiv');

    function divScroll() {
        var wholeHeight = divscroll.scrollHeight;
        var scrollTop = divscroll.scrollTop;
        var divHeight = divscroll.clientHeight;
        console.log(scrollTop + divHeight, wholeHeight)
        if (scrollTop + divHeight >= wholeHeight - 2) {
//            alert('滚动到底部了！');
            if (isLoad) {
                isLoad = false;
                setTimeout($.wyui.page.getByPage("scroll"), 1000);

            }

            //这里写动态加载的逻辑，比如Ajax请求后端返回下一个页面的内容
        }

    }

    divscroll.onscroll = divScroll;
</script>
<script>
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
</script>
</body>
</html>